<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body,
      p {
        margin: 0;
      }
      body {
        height: 100vh;
      }
      .wxPayPage {
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #f7f7f7;
        header {
          height: 48px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-weight: 500;
          background: rgb(237, 237, 237);
        }
        main {
          .top_sec {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            font-weight: 700;
            padding: 18px;
            p {
              font-size: 14px;
              margin-bottom: 2px;
              font-weight: 900;
            }
            > div {
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-column-gap: 4px;
              -moz-column-gap: 4px;
              column-gap: 4px;
            }
            > div .unit_span {
              font-size: 24px;
              line-height: 24px;
              position: relative;
              top: 3px;
            }
            > div #amount_num {
              font-size: 32px;
              line-height: 32px;
            }
          }
          .middle_sec {
            background: #ffffff;
            height: 48px;
            line-height: 16px;
            padding: 0 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.05);
            .label_sec {
              font-size: 12px;
              color: #86909c;
            }
            .label_val {
              color: #1d2129;
            }
          }
          .bottom_sec {
            padding: 20px 12px;
            .el-button {
              width: 100%;
            }
            /* button {
              background-color: #07c160;
              border-color: #07c160;
              color: rgb(255, 255, 255);
              width: 100%;
              font-size: 14px;
              padding: 10px 20px;
              border-radius: 4px;
              display: inline-block;
              line-height: 1;
              cursor: pointer;
              text-align: center;
              box-sizing: border-box;
              font-weight: 500;
              user-select: none;
              white-space: nowrap;
              border-width: 1px;
              border-style: solid;
              border-image: initial;
              outline: none;
              margin: 0px;
              transition: 0.1s;
            } */
          }
        }
        .el-result {
          .el-result__extra {
            margin-top: 10px;
            .extraWrap {
              .row_one {
                line-height: 24px;
                color: #1d2129;
              }
              .row_two {
                line-height: 22px;
                margin-top: 4px;
                font-size: 14px;
                color: #4e5969;
              }
            }
          }
        }
      }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css"
    />
  </head>
  <body>
    <div class="wxPayPage" id="app">
      <header>支付</header>
      <template v-if="visible">
        <main v-if="!success" id="pay_rect">
          <section class="top_sec">
            <p>U点充值</p>
            <div>
              <span class="unit_span">¥</span
              ><span id="amount_num">{{pay_amount}}</span>
            </div>
          </section>
          <section class="middle_sec">
            <span class="label_sec">收款方</span
            ><span class="label_val">U职</span>
          </section>
          <section class="bottom_sec">
            <el-button size="medium" type="success" @click="handleWeixinPay">
              立即支付
            </el-button>
            <p id="pay_num"></p>
          </section>
        </main>
        <section v-else id="success_rect">
          <el-result icon="success">
            <div slot="extra" class="extraWrap">
              <p class="row_one">支付成功！</p>
              <p class="row_two">本次充值U点：{{pay_amount}}</p>
            </div>
          </el-result>
        </section>
      </template>
    </div>

    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
      let site = ''
      let mSite = ''
      const prodStr = [
        'https://mtest.uzhijob.com',
        'http://127.0.0.1',
        'localhost'
      ]
      const isProd = prodStr.some(
        item => window.location.href.indexOf(item) > -1
      )
      if (isProd) {
        site = 'https://open.ihccs.com/test'
        mSite = 'https://mtest.uzhijob.com'
      } else {
        site = 'https://open.ihccs.com'
        mSite = 'https://m.uzhijob.com'
      }
      new Vue({
        el: '#app',
        data: function () {
          return {
            success: false,
            visible: false,
            pay_amount: '00.00',
            payId: '',
            timer: null
          }
        },
        created() {
          this.init()
        },
        methods: {
          dataForm(jsonData) {
            let data = new FormData()
            for (let key in jsonData) {
              data.append(key, jsonData[key])
            }
            return data
          },
          init() {
            const urlParams = new URLSearchParams(window.location.search)
            this.payId = urlParams.get('payId')
            axios
              .post(
                `${site}/company/upoint/order/detail`,
                this.dataForm({ payId: this.payId })
              )
              .then(res => {
                const { payAmount } = res.data.data ?? {}
                if (payAmount) {
                  this.pay_amount = payAmount
                  this.visible = true
                }
              })
          },
          checkOrderPayed(payId) {
            this.timer = setInterval(() => {
              axios
                .post(
                  `${site}/company/pay/upoint/pay/query`,
                  this.dataForm({ payId })
                )
                .then(res => {
                  const { data: state } = res
                  if (state === true) {
                    clearInterval(this.timer)
                    this.success = true
                  }
                })
            }, 3000)
          },
          handleWeixinPay() {
            const urlParams = new URLSearchParams(window.location.search)
            const code = urlParams.get('code')
            const data = {
              payId: this.payId,
              payType: 'wxpay',
              wxPayType: 'jsapi',
              wxCode: code
            }
            // this.checkOrderPayed(this.payId)
            axios
              .post(`${site}/company/pay/upoint/pay`, this.dataForm(data))
              .then(res => {
                // 请求成功处理
                const orderData = res.data.data
                const { wxResMap } = orderData
                if (JSON.stringify(wxResMap) === '{}') {
                  alert('订单不存在')
                  return
                }
                const {
                  prepay_id,
                  package,
                  timeStamp,
                  appId,
                  signType,
                  nonceStr,
                  paySign
                } = wxResMap
                if (typeof WeixinJSBridge === 'object') {
                  WeixinJSBridge.invoke(
                    'getBrandWCPayRequest',
                    {
                      appId,
                      timeStamp,
                      nonceStr,
                      package,
                      signType,
                      paySign
                    },
                    function (res) {
                      if (res.err_msg === 'get_brand_wcpay_request:ok') {
                        // 支付成功
                        alert('支付成功')
                      } else if (
                        res.err_msg === 'get_brand_wcpay_request:cancel'
                      ) {
                        // 支付取消
                        alert('支付取消')
                      } else {
                        // 支付失败
                        alert('支付失败')
                      }
                    }
                  )
                }
              })
              .catch(error => {
                alert('订单不存在')
                // alert(`error: ${JSON.stringify(error)}`)
                // 请求失败处理
              })
          }
        }
      })
    </script>
  </body>
</html>
